<template>
  <el-dialog :close-on-click-modal="false" 
    :visible="dialogFormVisible"
    :title="title"
    width="60%"
    @close="close"
  >
    <el-steps :active="active" align-center class="steps">
      <el-step description="设备类型" title="第1步" />
      <el-step description="录入设备基本信息" title="第2步" />
      <!-- <el-step description="机床特有信息" title="第3步" />
      <el-step description="料库特有信息" title="第4步" />
      <el-step description="运输设备特有信息" title="第5步" /> -->
      <el-step description="通讯协议" title="第3步" />
    </el-steps>
    <step1 v-if="active === 0" @change-step="handleSetStep" />
    <step2
      v-if="active === 1"
      :DeviceType="form.DeviceType"
      @change-step="handleSetStep"
    />
    <step3 v-if="active === 2" @change-step="handleSetStep" />
    <step4 v-if="active === 3" @change-step="handleSetStep" />
    <step5 v-if="active === 4" @change-step="handleSetStep" />
    <step6 v-if="active === 5" @change-step="handleSetStep" />
  </el-dialog>
</template>

<script>
  import Step1 from './Step1'
  import Step2 from './Step2'
  import Step3 from './Step3'
  import Step4 from './Step4'
  import Step5 from './Step5'
  import Step6 from './Step6'

  import { EquipmentInfo } from '@/api/equipment'
  export default {
    components: { Step1, Step2, Step3, Step4, Step5, Step6 },
    name: 'TableEdit',
    data() {
      return {
        active: 0,
        form: {},
        title: '',
        dialogFormVisible: false,
      }
    },
    mounted() {},
    methods: {
      handleSetStep(active, form) {
        console.log(active)
        this.active = active
        if (form) {
          this.form = Object.assign(this.form, form)
          if (this.active == 6) {
            EquipmentInfo(this.form).then((res) => {
              console.log('请求成功', res)
              this.$baseMessage(
                '请求成功',
                'success',
                'vab-hey-message-success'
              )
              this.active = 0
              this.dialogFormVisible = false
            })
          }
        }
      },
      showEdit(row) {
        console.log('rowrow', row)
        if (!row) {
          this.title = '添加'
        } else {
          this.title = '编辑'
          this.form = Object.assign({}, row)
        }
        this.dialogFormVisible = true
      },
      close() {
        // this.$refs['form'].resetFields()
        this.form = this.$options.data().form
        this.dialogFormVisible = false
      },
      save() {
        this.$refs['form'].validate(async (valid) => {
          if (valid) {
            if ((this.title = '编辑')) {
              await Renew(this.form)
            } else {
              this.form.UserId = 'UID' + new Date().getTime()
              this.form.Sex = '男'
              await Newly(this.form)
            }
            this.$baseMessage('操作成功', 'success', 'vab-hey-message-success')
            this.$emit('fetch-data')
            this.close()
          }
        })
      },
    },
  }
</script>

<style lang="scss" scoped>
  .step-form-container {
    :deep() {
      .el-steps {
        margin: $base-margin auto $base-margin * 2 auto;

        .el-step__title.is-process {
          color: var(--el-color-primary);
        }

        .el-step__description.is-process {
          color: var(--el-color-primary);
        }

        .el-step__head {
          &.is-process {
            color: var(--el-color-primary);
            border-color: var(--el-color-primary);

            .el-step__icon.is-text {
              color: var(--el-color-primary);
              background: var(--el-color-primary-light-9);
              border: 1px solid;
            }

            .el-step__line {
              height: 1px;
            }
          }

          &.is-wait {
            .el-step__icon.is-text {
              border: 1px solid;
            }

            .el-step__line {
              height: 1px;
            }
          }

          &.is-finish {
            .el-step__icon.is-text {
              color: var(--el-color-white);
              background: var(--el-color-primary);
            }

            .el-step__line {
              height: 1px;
              background: var(--el-color-primary);
            }
          }
        }
      }
    }
  }
</style>
